<template>
    <div class="main">
    <!--标签页-->
    <div class="head">
        <van-tabs v-model:active="active">
            <div class="back">
                <van-tab >
                <template #title> 
                <router-link to="/sort">
                    <van-icon name="arrow-left" @click="Sort"/>
                </router-link>
                </template>
            </van-tab>
            </div>
        <van-tab title="商品详情">
        <div class="body">
        <van-cell/>
        
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
        v-for="i in photoData"
        :key="i.id"
        .click="swipeClick"
        >
        <van-image
        width="375px"
        height="375px"
        :src="i.src"
        />
        </van-swipe-item>
        <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
        </van-swipe>
        <div class="price">
        <div class="left">
            <div class="all-price">
            <span class="price-tag">¥</span>
            <span class="original-price">8999</span>
            <div class="price-block">
                <span class="offer-price">到手价</span>
                <span class="price-tag1">¥</span>
                <span class="new-price">8989</span>
            </div>
            </div>
        </div>
        <div class="right">
            <!--第一个图片-->
            <van-image
            class="photo1"
            vertical-align="middle"
            width="118"
            height="22"
            src="https://dsfs.oppo.com/archives/202303/2023030105034263ff1a8e483b1.png?_w_=360&_h_=66"/>
        </div>
        </div>
        <div class="coupon">
            <van-cell class="first" is-link @click="showPopup">
            <van-image
            class="photo2"
            width="59"
            height="20"
            src="https://dsfs.oppo.com/archives/202208/2022080402084462eb66680a2fe.png?_w_=177&_h_=60"
            />
            花呗12期免息, 每天仅需24.97元
            </van-cell>
            <van-popup
            v-model:show="showBottom"
            round
            position="bottom"
            :style="{ height: '70%' }">
            <div class="stages-title">
            <span class="stages-title1">分期免息</span>
            </div>
            <div class="stages-title">
            <span class="stages-title2">优惠说明</span>
            </div>
            <div class="stages">
            <span class="stages-left">花呗分期</span>
            <span class="stages-right">最高12期免息</span>
            </div>
            <div class="stages-all-content">
            <span class="stages-content">¥ 749.08 x 12 期免息</span>
            <span class="stages-content1">0 手续费，预计为您减免手续费 674.17元</span>
            </div>
            <div class="stages-all-content">
            <span class="stages-content">¥ 1498.17 x 6 期免息</span>
            <span class="stages-content1">0 手续费，预计为您减免手续费 404.5元</span>
        </div>
            <div class="stages-all-content">
            <span class="stages-content">¥ 2996.33 x 3 期免息</span>
            <span class="stages-content1">0 手续费，预计为您减免手续费 206.75元</span>
        </div>
        <div class="stages-button">
            <van-button round type="success" color="#F63434" size="large">确定</van-button>
        </div>
            </van-popup>
            <div class="ticket">
                <van-cell class="two" is-link @click="showPopup">
                <div class="coupon1">
                <span class="red-ticket">券 | 满700减10</span>
                <span class="shopping">购物送积分</span>
                </div>
                </van-cell>
                <van-popup
                v-model:show="showBottom1"
                round
                position="bottom"
                :style="{ height: '70%' }"
                />
            </div>
        </div>
        <!-- </van-cell> -->
        <van-back-top/>
        <div class="content">
            <span class="introduce">OPPO Find N2 松绿 16GB+512GB 官方标配</span>
            <span class="introduce1">以旧换新至高补贴1300元,</span>
            <span class="introduce2">点击估价>></span>
            <div class="tag">
            <van-image
            width="21"
            height="21"
            src="https://dsfs.oppo.com/archives/202111/20211123021118619c8eb2c8b64.png?_w_=60&_h_=60"
            />
            <span class="tag-name">商品对比</span>
            <van-image
            class="picture"
            width="21"
            height="21"
            src="https://dsfs.oppo.com/archives/202111/20211123021134619c8efe1da05.png?_w_=60&_h_=60"
            />
            <span style="line-height: 12px;" class="tag-name1">360°搜索</span>
            </div>
            
        </div>
        <div class="div">
        <div class="box">
        <div class="box1">
            <div class="box-img">
            <van-image
            width="20"
            height="20"
            src="https://dsfs.oppo.com/omp/1658487651860-_-438dfc88ccf14177bc3b09a8bf6f4f99.png?_w_=60&_h_=60"
            />
            </div>
            
            <div class="slip-content">
            <span class="processor">第一代骁龙 8+</span>
            <span class="processor1">处理平台</span>
            </div>
        </div>
        <div class="box2">
            <div class="box-img">
            <van-image
            width="20"
            height="20"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221206/651e6162e8cb16f0097d08dd529265821358793176.png?_w_=60&amp;_h_=60"
            />
            </div>
            <div class="slip-content2">
            <span class="type">双 120Hz 镜面...</span>
            <span class="type1">屏幕类型</span>
            </div>
        </div>
        <div class="box3">
            <div class="box-img">
            <van-image
            width="20"
            height="20"
            src="https://dsfs.oppo.com/omp/1658488100947-_-ac3182c9438e498fa0d5913b8c9cbd2c.png?_w_=61&amp;_h_=61"
            />
            </div>
            <div class="slip-content3">
            <span class="system">哈苏影像系统</span>
            <span class="system1">后置摄像头</span>
            </div>
        </div>
        <div class="box4">
            <div class="box-img">
            <van-image
            width="20"
            height="20"
            src="https://dsfs.oppo.com/omp/1668393851385-_-0c5b720daa9241dfb634a1cd77f54735.png?_w_=60&amp;_h_=60"
            />
            </div>
            <div class="slip-content4">
            <span class="weight">233g 超轻折叠...</span>
            <span class="weight1">重量</span>
            </div>
        </div>
        <div class="box5">
            <div class="box-img">
            <van-icon name="more-o" size="15"/>
            </div>
            <div class="more">
            <span class="parm">查看参数</span>
            </div>
        </div>
        </div>
        </div>
        
        <div class="address-box">
        <div class="address">
        <div class="select">已选</div>
        <div class="all-tag">
        <van-cell  @click="showPopup" class="pop" size="large" is-link>
        <template #title>
        <div class="tag-list" >
        <van-tag color="#ffe1e1" type="primary" style="color: #000000;">松绿</van-tag>
        <van-tag color="#ffe1e1" type="primary" style="color: #000000;">16GB+512GB</van-tag>
        <van-tag color="#ffe1e1" type="primary" style="color: #000000;">官方标配</van-tag>
        <van-tag color="#ffe1e1" type="primary" style="color: #000000;">1件</van-tag>
        <br>
        <van-tag color="#ffe1e1" type="primary" style="color: #000000;">可选服务</van-tag>
        </div>
        </template>
        </van-cell>
        <van-popup
            v-model:show="showBottom2"
            round
        position="bottom"
        :style="{ height: '70%' }"
        />

        </div>
        <div class="goods-photo">
        <van-image
        class="picture"
        width="30"
        height="30"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/1936effb41dd2f8c76ea03ce8896aed2-1469283732.png?_w_=1080&amp;_h_=1080"
        />
        <van-image
        class="picture"
        width="30"
        height="30"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221214/e119ad52b31f58ecaa00625b912879eb1883167002.png?_w_=1080&amp;_h_=1080"
        />
        <van-image
        class="picture"
        width="30"
        height="30"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221214/fc706981a1e86b9888a4dbb7e0d6fcda974287437.png?_w_=1080&amp;_h_=1080"
        />
        <div class="button">
        <van-button round type="success" size="small" color="#f6f2f3" >
        <span class="button1">3款可选</span></van-button>
        </div>
        
        </div>
        </div>
        <van-cell class="home-address" size="large" is-link >
        <span class="service1">送至</span>
        <div class="service2">
        <van-icon name="location-o" />
        <span>您还没有登录,请先登录</span>
        </div>
        </van-cell>
        <van-popup
        v-model:show="showBottom3"
        round
        position="bottom"
        :style="{ height: '70%' }"
        />
        <span class="service">现货,周末及节假日均可配送</span>
        <div class="after-sales">
        <span class="after-sales1">
        <van-icon name="passed" /> 七天价保
        </span>
        <span class="after-sales2">
        <van-icon name="passed" /> 官方正品
        </span>
        <br>
        <span class="after-sales3">
        <van-icon name="passed" /> 顺丰包邮（实付满69元包邮）
        </span>
        <span class="after-sales4">
        <van-icon name="passed" /> 全国联保
        </span>
        </div>
        </div>
        <div class="collocation">
        <div class="collocation-title">
        <span class="collocation-title1">超值搭配</span>
        <span class="collocation-title2">搭配购买最高省¥640</span>
        </div>
        <div class="collocation-box">
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230216/5ace9b5ef00dd3b2f8723576bec74d89-24571650.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">Air3紫</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">179</span>
            <span class="purple-original">¥199</span>
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="white-img"
            width="92"
            height="92"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230216/4374263976e2a8994045f278ab419704-328192415.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">Air3白</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">179</span>
            <span class="purple-original">¥199</span>
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221209/5ace9b5ef00dd3b2f8723576bec74d891970206694.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">Enco X2 金色</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">799</span>
            <span class="purple-original">¥999</span>
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221214/5ace9b5ef00dd3b2f8723576bec74d891777956466.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">手写笔</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">5999</span>
            <!-- <span class="purple-original">¥199</span> -->
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/dfb65d5f9a72587133f7b54ef93a6948-1084987258.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">车载支架</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">299</span>
            <!-- <span class="purple-original">¥199</span> -->
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://dsfs.oppo.com/omp/1660129796666-_-3ad0588060dd42a09f45dd7b11c8277d.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">Watch3 Pro</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">1799</span>
            <span class="purple-original">¥1999</span>
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        <div class="purple-box">
            <van-image
            class="purple-img"
            width="92"
            height="92"
            src="https://dsfs.oppo.com/omp/1660035301070-_-a862c09b672249b9b6336f997c1e53d2.png?_w_=320&amp;_h_=320"
            />
            <div class="purple-all">
            <span class="purple-name">Watch3 Pro</span>
            <div class="purple-price">
            <span class="purple-tag">¥</span>
            <span class="purple-price">1899</span>
            <span class="purple-original">¥2099</span>
            </div>
            <div class="checked">
            <van-icon name="checked" color="#969799" />
            </div>
            
            </div>
        </div>
        </div>
        </div>
        <div class="user">
        <van-cell value="好评率 98.3%" size="large" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
        <span class="user-title">用户评价（1606）</span>
        </template>
        </van-cell>
        <div class="button-box">
        <div class="user-button1">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment"> 手感一流 672</span></van-button>
        </div>
        <div class="user-button2">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment"> 拍照好 141</span></van-button>
        </div>
        <div class="user-button3">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment">外观漂亮 262</span></van-button>
        </div>
        <div class="user-button4">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment">官方正品 67</span></van-button>
        </div>
        <div class="user-button5">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment">多次购买 224</span></van-button>
        </div>
        <div class="user-button6">
        <van-button round type="success" size="small" color="#FDE3E3">
        <span class="user-comment">屏幕出色 115</span></van-button>
        </div>
        
        
        
        
        
        </div>
        <div class="user-information">
        <div class="user-box">
        <div class="information-top">
        <div class="user-loge">
        <van-image
        width="37.5"
        height="37.5"
        src="https://uc-avatar-cn.heytapimage.com/titans-usercenter-avatar-bucket-cn/default-new.png"
        />
        </div>
        <span class="user-name">E***i</span>
        <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div>
        <div class="star-box">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select">2月前|云白，12GB+256GB，官方...</span>
        <div class="user-comment1">
        <span class="user-word">第一次尝试折叠屏手机, 也是第一次买OPPO手机。</span>
        <span class="word-user">轻便小巧，质感满满，系统流畅。OPPO...</span>
    </div>
        <div class="user-photo">
        <div class="user-photo1">
            <van-image
        width="83"
        height="83"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20221224/15456607e571c6916e786081696a3efb-1744255393_20221224110651.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20221224cd7366d0d7290630c4340b7c8d58e606646240789.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20221224cd7366d0d7290630c4340b7c8d58e6061621364130.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        </div>
        </div>
        </div>
        <div class="user-box">
        <div class="information-top">
        <div class="user-loge">
        <van-image
        width="37.5"
        height="37.5"
        src="https://ocs-cn-north1.heytapcs.com/titans-usercenter-avatar-bucket-cn/157/664/399/993466751.jpg?20230201134822"
        />
        </div>
        <span class="user-name">用***n</span>
        <!-- <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div> -->
        <div class="star-box">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select">2月前|素黑，12GB+256GB， +19.....</span>
        <div class="user-comment1">
        <span class="user-word">物流快，服务好。以前一直使用小米手机，第一</span>
        <span class="word-user">次用oppo手机，冲着折叠屏，感觉不错，...</span>
        </div>
        <div class="user-photo">
        <div class="user-photo1">
            <van-image
        width="83"
        height="83"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20230103/15456607e571c6916e786081696a3efb-773665013_20230103093729.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230103cd7366d0d7290630c4340b7c8d58e606-1852746175.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230103cd7366d0d7290630c4340b7c8d58e606925581554.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        </div>
        </div>
        </div>
        <div class="user-box">
        <div class="information-top">
        <div class="user-loge">
        <van-image
        width="37.5"
        height="37.5"
        src="https://ocs-cn-north1.heytapcs.com/titans-usercenter-avatar-bucket-cn/705/697/700/7796507.jpg?20170712175134"
        />
        </div>
        <span class="user-name">瓦***卫</span>
        <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div>
        <div class="star-box">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select">24天前|素黑，16GB+512GB，官...</span>
        <div class="user-comment1">
        <span class="user-word">首先，我是将R9置换的，这个活动不错，价格合</span>
        <span class="word-user">理，所以我毫不犹豫决定换了这款，物流...</span>
        </div>
        <div class="user-photo">
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20230208/ba036ad6eabd8105fe1cba1d2899170f65557212_20230208094652.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/2023020829620fe29a35f3fd69bbb67ffa4e48121175777232.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/202302088095e9e6a40a38b93cba01a4c99cb569-1536323908.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        
        
        </div>
        </div>
        </div>
        <div class="user-box">
        <div class="information-top">
        <div class="user-loge">
        <van-image
        width="37.5"
        height="37.5"
        src="https://ocs-cn-north1.heytapcs.com/titans-usercenter-avatar-bucket-cn/910/237/328/823732019.jpg?20211223230829"
        />
        </div>
        <span class="user-name">用***0</span>
        <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div>
        <div class="star-box">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select">1月前|素黑，12GB+256GB，官方...</span>
        <div class="user-comment1">
        <span class="user-word">这是第二次购买OPPO折叠手机了，之前使用find</span>
        <span class="word-user"> n,总体体验还可以，就是个别app适配不...</span>
        </div>
        <div class="user-photo">
        <div class="user-photo1">
            <van-image
        width="83"
        height="83"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20230120/8bf986889b8e29577f827c1d8e68a7a9-887977184_20230120153638.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230120123c6be72f2914945264565c0294b0c5-1462293868.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/202301204fb76d0809496620d997e4457cd87d7d-899677225.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        </div>
        </div>
        </div>
        <div class="user-box">
        <div class="information-top">
        <div class="user-loge">
        <van-image
        width="37.5"
        height="37.5"
        src="https://ocs-cn-north1.heytapcs.com/titans-usercenter-avatar-bucket-cn/894/272/761/167272498.jpg?20230117002903"
        />
        </div>
        <span class="user-name">啾***迷</span>
        <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div>
        <div class="star-box">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select">1月前|素黑，16GB+512GB，官方...</span>
        <div class="user-comment1">
        <span class="user-word">手机收到了，旧手机是opporeno初代，用了三年</span>
        <span class="word-user">半，除了淘宝会卡，其他软件打游戏都还...</span>
        </div>
        <div class="user-photo">
        <div class="user-photo1">
            <van-image
        width="83"
        height="83"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20230111/9886a5d447c4b040754a9ce933f257b4-307510071_20230111214444.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230111531ae632f3ff9d30c041f76c5b2899a5-1912881865.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="user-photo1">
        <van-image
        width="83"
        height="83"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230111e75a0d89c8b5fb5b752383d43b300626-2026986759.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        </div>
        </div>
        </div>
        <!-- <div class="user-box">
        <div class="user-more">
        <span class="user-more0">更多评价</span>
        </div>
        </div> -->
        </div>
        <div class="product-img">
        <van-image
        width="375"
        height="187.94"
        src="https://dsfs.oppo.com/archives/202302/2023022010021863f2dbb237908.jpg?_w_=1080&amp;_h_=541&amp;x-oss-process=image/format,webp"
        />
        <div class="product-img1">
        <van-image
        width="375"
        height="113.05"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221230/e8315bdbb2979182d64306b0cf19c3da-880921533.jpg?_w_=1125&amp;_h_=339&amp;x-oss-process=image/format,webp"
        />
        </div>
        <div class="product-img2">
            <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/3f204ca021b399801c7736a65026aae0156468712.jpg?_w_=1080&amp;_h_=274&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/f3ccdd27d2000e3f9255a7e3e2c488001238827377.jpg?_w_=1080&amp;_h_=228&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/156005c5baf40ff51a327f1c34f2975b-711627188.jpg?_w_=1080&amp;_h_=228&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/799bad5a3b514f096e69bbc4a7896cd91030168312.jpg?_w_=1080&amp;_h_=216&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230303/75cb7f7728246da8ee9d1c8cf3f7bfdb-171290282.jpg?_w_=1080&amp;_h_=232&amp;x-oss-process=image/format,webp"
        />
        </div>
        
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230228/e4333d6f21488f27aef7f56aeee576e7-1324530942.jpg?_w_=1125&amp;_h_=1231&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230228/77b5a23685a74f7d2ff0e72f7d64a357-1473668778.jpg?_w_=1125&amp;_h_=1090&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/2ecc94569dafee5b1d452bf6a6af19cb-1977226568.jpg?_w_=1125&amp;_h_=1953&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230111/6f632afcebf0ad3819b3ef3c3ce56bd8-288138211.png?_w_=1125&amp;_h_=2044&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/d5445be54ee0a61611bd274f86604346445006481.jpg?_w_=1125&amp;_h_=2474&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/dbc0050b6c0d4fc6ea6360cae3e8e71d299193720.jpg?_w_=1125&amp;_h_=2141&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/6c023a301205290021b97308427c9780-1950565728.jpg?_w_=1125&amp;_h_=2019&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/f606e78d2634e0ed1b1c6c10f599721d-526775831.jpg?_w_=1125&amp;_h_=2085&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/0e7a0227bf4bf372647f52dab51a83be221476560.jpg?_w_=1125&amp;_h_=2221&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/cb2d47b12c068fe9f3bc58780250c0be1396935121.jpg?_w_=1125&amp;_h_=2497&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/d3d984880b9c1ae50f862db4a8f9f263764871848.jpg?_w_=1125&amp;_h_=2306&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/42de895d1e714b875361bb239fa13790776561499.jpg?_w_=1125&amp;_h_=2306&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230105/e37a7137b2ef448ecd68972e6d634da6-2001275741.jpg?_w_=1125&amp;_h_=339&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230105/be6d09eb9f7e288c99152e9f3872ae5d328143091.gif?_w_=802&amp;_h_=428&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230105/dc88dacd3127899feb7176d07fe8181c295085949.gif?_w_=802&amp;_h_=428&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230105/5adc39ae41ea324dcdf9c50a11249048732012330.gif?_w_=802&amp;_h_=428&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/5b43d98e2e0fcd251671c413a1f37f2c2087387935.jpg?_w_=1125&amp;_h_=2034&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/e029247ab56a697e5da855fe3e075cc11343432500.jpg?_w_=1125&amp;_h_=2568&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/30f343819659079ef7186e1ff916ddb5-1621105791.jpg?_w_=1125&amp;_h_=2157&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/193cb91dbd826b35190019655ff9f7bf4294887.jpg?_w_=1125&amp;_h_=2217&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/a3b35435940865fe9fa612e17a158be5808915971.jpg?_w_=1125&amp;_h_=2217&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/c2496bde3f3423ddeec80591dbabfbd4-1030325168.jpg?_w_=1125&amp;_h_=2418&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/0f90986c7c338fe3e5462c03f883e66a517271927.jpg?_w_=1125&amp;_h_=1950&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/7de3efe6877fc38b642c1b13f22020f1-1980501421.jpg?_w_=1125&amp;_h_=1950&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/9a98bdf8f2a98b6b874455fc130b5f04345571780.jpg?_w_=1125&amp;_h_=2458&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221229/e7e88b9179db56094726482fe4f5566f-1951396859.jpg?_w_=1125&amp;_h_=2194&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/18e7fbd01e7af0df807f8eed6f7cabba-1516525824.jpg?_w_=1125&amp;_h_=1144&amp;x-oss-process=image/format,webp"
        />
        <van-image
        width="100%"
        height="100%"
        src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b5d13ca65fe589eb14699682257b4290-1047929142.jpg?_w_=1125&amp;_h_=173&amp;x-oss-process=image/format,webp"
        />

        </div>
        </div>

        </div>
        </van-tab>
            <van-tab title="用户评价">
            <div class="body1">
            <div class="optimize-list">
            <div class="list1">
            <van-button type="default" size="small" >
            <span class="user-comment1"> 手感一流 672</span></van-button>
            </div>
            <div class="list2">
            <van-button type="default" size="small" >
            <span class="user-comment1"> 拍照好 141</span></van-button>
            </div>
            <div class="list3">
            <van-button type="default" size="small" >
            <span class="user-comment1">外观漂亮 262</span></van-button>
            </div>
            <div class="list4">
            <van-button type="default" size="small" >
            <span class="user-comment1">官方正品 67</span></van-button>
            </div>
            <div class="list5">
            <van-button type="default" size="small">
            <span class="user-comment1">多次购买 224</span></van-button>
            </div>
            <div class="list6">
            <van-button type="default" size="small">
            <span class="user-comment1">屏幕出色 115</span></van-button>
            </div>
            </div>
            <div class="tab-content">
            <div class="whole">
            <van-button type="default" hairline="true" size="small" color="#ffb9c1" style="color: rgb(198, 76, 130);">全部</van-button>
            </div>
            <div class="whole1">
            <van-button type="default" size="small" color="rgb(232 230 230)" style="color: #000000;">嗮图/视频 1125</van-button>
            </div>
            <div class="whole2">
            <van-button type="default" size="small" color="rgb(232 230 230)" style="color: #000000;">追评 73</van-button>
            </div>
            <div class="whole3">
            <van-button type="default" size="small" color="rgb(232 230 230)" style="color: #000000;">好评 1580</van-button>
            </div>
            <div class="whole4">
            <van-button type="default" size="small" color="rgb(232 230 230)" style="color: #000000;">中/差评 28</van-button>
            </div>
            </div>
            <div class="bar-second">
            <div class="second-left">
            <div class="circle"><van-icon name="circle" /></div>
            <span class="second-select">只看当前商品</span>
            </div>
            <div class="second-right">
            <span class="second-right1">最新排序  |</span>
            <span class="second-right2">默认排序</span>
            </div>
            </div>
            <div class="bar3">
            <div class="bar-comment">
            <div class="comment-top">
            <div class="user-loge1">
            <van-image
            width="37.5"
            height="37.5"
            src="https://uc-avatar-cn.heytapimage.com/titans-usercenter-avatar-bucket-cn/default-new.png"
            />
            </div>
            <span class="user-name1">E***i</span>
            <div class="user-identity1">
            <van-image
            width="47"
            height="18.64"
            src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
            />
            </div>
            <div class="star-box1">
            <van-icon name="star" color="#ff8d07"/>
            <van-icon name="star" color="#ff8d07"/>
            <van-icon name="star" color="#ff8d07"/>
            <van-icon name="star" color="#ff8d07"/>
            <van-icon name="star" color="#ff8d07"/>
            </div>
            <span class="user-select1">2月前|云白，12GB+256GB，官方标配</span>
            <div class="follow-comment">
            <!-- <van-text-ellipsis
            rows="3"
            :content="text"
            expand-text="展开"
            collapse-text="收起"
            /> -->
            <span class="user-word1">第一次尝试折叠屏手机, 也是第一次买OPPO手机。轻便小巧，质感满满，系统流畅。OPPO前置仓发货也带来了惊喜，当天早上就收到了。...</span>
            
        </div>
            <div class="follow-photo">
            <div class="follow-photo1">
                <van-image
            width="214"
            height="214"
            radius="10"
            src="https://msecfs.opposhop.cn/video-comment/20221224/15456607e571c6916e786081696a3efb-1744255393_20221224110651.jpg?x-oss-process=image/resize,w_90"
            />
            </div>
            
            <div class="follow-photo2">
            <van-image
            width="104"
            height="104"
            radius="10"
            src="https://dsfs.oppo.com/comment/20221224cd7366d0d7290630c4340b7c8d58e606646240789.jpg?x-oss-process=image/resize,w_90"
            />
            </div>
            
            <div class="follow-photo3">
            <van-image
            width="104"
            height="104"
            radius="10"
            src="https://dsfs.oppo.com/comment/20221224cd7366d0d7290630c4340b7c8d58e6061621364130.jpg?x-oss-process=image/resize,w_90"
            />
        </div>
        </div>
        </div>
            </div>
            <div class="seller-comment">
            <span class="seller">官方回复:</span>
            <span class="seller-comment1">闭合状态下成5.54英寸的单手操作更稳的直升机,展开状态下为7.10英寸随身小平板,微信横图大四倍。此为：闭合...</span>
            </div>
            <div class="bar-comment">
        <div class="comment-top">
        <div class="user-loge1">
        <van-image
        width="37.5"
        height="37.5"
        src="https://ocs-cn-north1.heytapcs.com/titans-usercenter-avatar-bucket-cn/157/664/399/993466751.jpg?20230201134822"
        />
        </div>
        <span class="user-name1">用***n</span>
        <!-- <div class="user-identity">
        <van-image
        width="47"
        height="18.64"
        src="https://dsfs.oppo.com/archives/202108/testing1_20210819110804611dced479bde.png"
        />
        </div> -->
        <div class="star-box1">
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        <van-icon name="star" color="#ff8d07"/>
        </div>
        <span class="user-select1">2月前|素黑,12GB+256GB,+19.9元[O气满满...</span>
        <div class="follow-comment">
        <span class="user-word1">物流快,服务好。以前一直使用小米手机，第一次用oppo手机，冲着折叠屏，感觉不错，系统流畅，好用，值得大赞，加油。</span>
        </div>
        <div class="follow-photo">
        <div class="follow-photo1">
            <van-image
        width="214"
        height="214"
        radius="10"
        src="https://msecfs.opposhop.cn/video-comment/20230103/15456607e571c6916e786081696a3efb-773665013_20230103093729.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="follow-photo2">
        <van-image
        width="104"
        height="104"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230103cd7366d0d7290630c4340b7c8d58e606-1852746175.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        <div class="follow-photo3">
        <van-image
        width="104"
        height="104"
        radius="10"
        src="https://dsfs.oppo.com/comment/20230103cd7366d0d7290630c4340b7c8d58e606925581554.jpg?x-oss-process=image/resize,w_90"
        />
        </div>
        
        </div>
        </div>
        </div>
        <div class="seller-comment">
            <span class="seller">官方回复:</span>
            <span class="seller-comment1">感谢您的夸奖哦,好马配好鞍,好产品当然要配好物流,就像我们的产品一定要配这么优秀的您哦,期待您的再次光...</span>
            </div>
            <van-divider :style="{ color: '#1989fa', borderColor: 'black', padding: '0 16px' }"/>
            <div class="return-comment">
            <span class="return-comment1">6天后追评：</span>
            <span class="return-comment2">手持手感帮，系统流畅，外屏单</span>
            <span class="return-comment3">手操作简单容易，内屏办公、娱乐非常适合，</span>
            <span class="return-comment4">值得推荐。</span>
            <div class="return-img">
            <van-image
            width="104"
            height="104"
            radius="5"
            src="https://dsfs.oppo.com/comment/20230109cd7366d0d7290630c4340b7c8d58e606-1994859697.jpg?x-oss-process=image/format,webp"
            />
            </div>
            <div class="return-img1">
            <van-image
            width="104"
            height="104"
            radius="5"
            src="https://dsfs.oppo.com/comment/20230109cd7366d0d7290630c4340b7c8d58e606-688625017.jpg?x-oss-process=image/format,webp"
            />
            </div>
            
            </div>
            </div>
            </div>
            </van-tab>
            <van-tab title="参数及包装" size="small" color="rgb(232 230 230)">
            <div class="body2">
            <div class="bag-top">
            <span class="bag-title">包装清单</span>
            </div>
            <div class="part-list">
            <div class="part">
            <div class="part-img">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335354-_-c25a2a71bb76493e85fb8f9bae033c53.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>手机</span>
            </div>
            </div>
            <div class="part-right">
            <div class="part-img1">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335428-_-fa2766a9ab9d4acdb1bf824077ecc2f1.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>手机壳</span>
            </div>
            </div>
            <div class="part">
            <div class="part-img">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335084-_-9eed134f187e449ca8ea611a9c9a5cc5.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>充电器</span>
            </div>
            </div>
            <div class="part-right">
            <div class="part-img1">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335506-_-f09193200580498fa66bcbbdb97a5f50.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>数据线</span>
            </div>
            </div>
            <div class="part">
            <div class="part-img">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335506-_-f09193200580498fa66bcbbdb97a5f50.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>取卡针</span>
            </div>
            </div>
            <div class="part-right">
            <div class="part-img1">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661398830416-_-fad8ff5169c8455faf9dd0c29c27205f.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>保修卡</span>
            </div>
            </div>
            <div class="part">
            <div class="part-img">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661332335581-_-165b803be2924f4690382e9864d4541e.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>快速入门指南</span>
            </div>
            </div>
            <div class="part-right">
            <div class="part-img1">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661479234963-_-b7952337715c4dc09b37ed202fea04cc.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>VIP卡</span>
            </div>
            </div>
            <div class="part">
            <div class="part-img">
            <van-image
            width="24"
            height="24"
            src="https://dsfs.oppo.com/omp/1661479235179-_-a4eda2752531420f8418a9a8c756e3c7.png?_w_=72&amp;_h_=72"
            />
            </div>
            <div class="part1">
            <span>温馨提示卡</span>
            </div>
            </div>
            </div>
            <van-divider :style="{ color: '#1989fa', borderColor: 'black', padding: '0 16px' }"/>
            <div class="agent-title">
            <span s>主体</span>
            </div>
            <div class="agent">
            <div class="agent-left">产品名称</div>
            <div class="agent-right">OPPO Find N2</div>
            <div class="agent-left">品牌</div>
            <div class="agent-right">OPPO</div>
            <div class="agent-left">上市时间</div>
            <div class="agent-right">2022年12月</div>
            <div class="agent-left">入网型号</div>
            <div class="agent-right">PGU110</div>
            </div>
            </div>
            </van-tab>
            </van-tabs>
        </div>
        <!--下面固定的图标-->
        <van-action-bar>
        <van-action-bar-icon icon="wap-home-o" text="首页"  />
        <van-action-bar-icon icon="service-o" text="客服"  />
        <van-action-bar-icon icon="cart-o" text="购物车"  />
        <van-action-bar-button class="car" type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" >
        <span class="prices">到手价 ¥ 8989 </span>
        <span class="word"> 立即购买</span>
        </van-action-bar-button>
        </van-action-bar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import Sort from "@/views/SortView.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const active = ref(1);
const photoData = [
    {
        id: 1,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230302/3f25b86ea7ed642b286a9a33304b9d701608448136.jpg?_w_=1080&amp;_h_=1080",
    },
    {
        id: 2,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/ecffa4985a0c5d7aa57992b9d96c5738-727160458.jpg?_w_=1080&amp;_h_=1080",
    },
    {
        id: 3,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/c17696bc49e38212e5f7fa5be1e794fd1438082146.jpg?_w_=1080&amp;_h_=1080",
    },
    {
        id: 4,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/1936effb41dd2f8c76ea03ce8896aed2-1469283732.png?_w_=1080&amp;_h_=1080",
    },
    {
        id: 5,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/14cdc06b793fae09ccfddb3ecdd77a7b1055435612.png?_w_=1080&amp;_h_=1080",
    },
    {
        id: 6,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/36fec59ae59225b68b3272a775eddbc1-1621988334.png?_w_=1080&amp;_h_=1080",
    },
    {
        id: 7,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/2635aaa923a6b71128a88db3a45bc054-1542183766.png?_w_=1080&amp;_h_=1080",
    },
    {
        id: 8,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/a6f2b143bcb5759ac7fbc1b23f087a06357854092.png?_w_=1080&amp;_h_=1080",
    },
    {
        id: 9,
        src: "https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221213/e089d7ecd6736c1d54a23be120218d2d1410230881.jpg?_w_=1080&amp;_h_=1080",
    },
    ];
const showBottom = ref(false);
const showPopup = () => {
    showBottom.value = true;
};

</script>

<style lang="less" scoped>
.main{
    background-color: #f6f2f3;
    :deep(.van-tabs__line){
        background-color: red;
    }
    .head{
        width: 375px;

        .stages-button {
            width: 229px;
            height: 46px;
            font-size: 16px;
            padding-top: 114px;
            padding-left: 73px;
            float: left;
        }
        .stages-all-content {
            height: 63px;
            width: 327.2px;
        }

    .stages-content {
        width: 327.2px;
        height: 14px;
        color: #000000D9;
        font-size: 14px;
        float: left;
        padding-left: 30px;
        padding-top: 18px;
    }
    .stages-content1 {
        width: 327.2px;
        height: 12px;
        font-size: 12px;
        color: #0000008C;
        float: left;
        padding-top: 10px;
        padding-left: 30px;
    }

    .stages-title {
        width: 163.6px;
        height: 44px;
        padding-left: 2px;
        padding-right: 2px;
        margin: 0px!important;
        float: left;
    }
    .stages-title1 {
        width: 56px;
        height: 44px;
        color: #000000D9;
        font-size: 14px;
        float: left;
        padding-left: 68px;
        padding-top: 30px;
    }
    .stages-title2 {
        width: 56px;
        height: 44px;
        color: #000000D9;
        font-size: 14px;
        float: left;
        padding-left: 70px;
        padding-top: 30px;
    }
    .stages {
        width: 375px;
        height: 44px;
    }
    .stages-left {
        width: 64px;
        height: 30px;
        color: #000000D9;
        font-size: 16px;
        float: left;
        padding-top: 40px;
        padding-left: 28px;
    }
    .stages-right {
        width: 78px;
        height: 17px;
        color: #007BFF;
        float: left;
        margin-top: 43px;
        margin-left: 9px;
        font-size: 12px;
        background-color: #c7dbf0;
    }
    .body2 {
        width: 375px;
        height: 584px;
        background-color: #ffffff;
    }

    .agent-title {
        width: 327.2px;
        height: 41.5px;
        color: #000000D9;
        font-size: 16px;
        padding-left: 30px;
        padding-top: 10px;
        font-weight: 700;
    }
    .agent {
        height: 160px;
        width: 357.2px;
        margin: 0px !important;
    }
    .agent-left {
        height: 20px;
        width: 84px;
        font-size: 14px;
        color: #000000D9;
        padding-left: 30px;
        margin: 0px !important;
        float: left;
        padding-bottom: 8px;
    }
    .agent-right {
        width: 220px;
        height: 20px;
        font-size: 14px;
        color: #0000008C;
        float: left;
        padding-top: 3px;
        padding-left: 2px;
        padding-bottom: 8px;
    }

    .part-list {
        height: 240px;
        width: 375.2px;
        margin: 0px;
    }
    .part {
        height: 48px;
        width: 187.6px;
        // padding-left: 24px;
        margin: 0px !important;
        padding-right: 0px;
        float: left;
    }
    .part-right {
        height: 48px;
        width: 170px;
        padding-left: 14px;
        margin-right: 0px;
        float: left;
    }
    .part-img1 {
        height: 24px;
        width: 24px;
        float: left;
        padding-left: 5px;
        padding-top: 10px;
    } 
    .part-img {
        height: 24px;
        width: 24px;
        float: left;
        padding-left: 30px;
        padding-top: 10px;
    } 
    .part1 {
        height: 20px;
        width: 104px;
        font-size: 14px;
        color: #0000008C;
        float:left;
        padding-left: 12px;
        padding-top: 10px;
    }
    .bag-top {
        width: 375.2px;
        height: 35.5px;
        padding-top: 20px;
        font-weight: 700;

    }
    
    .bag-title {
        width: 375.2px;
        height: 46.5px;
        color: #000000D9;
        padding-left: 40px;
        font-size: 16px;

    }
    .return-comment {
        width: 325.2px;
        height: 200px;
    }
    .return-comment1 {
        font-size: 15px;
        height: 16.8px;
        width: 87.51px;
        color: #F34141;
        padding-left: 19px;
    }
    .return-comment2 {
        height: 16.8px;
        font-size: 15px;
        color: #000000D9;
        width: 230px;
    }
    .return-comment3 {
        width: 325.2px;
        height: 46px;
        font-size: 15px;
        color: #000000D9;
        padding-left: 19px;
    }
    .return-comment4 {
        height: 16.8px;
        font-size: 15px;
        color: #000000D9;
        width: 230px;
        padding-left: 19px;
    }
    .return-img {
        width: 104px;
        height: 104px;
        float: left;
        padding-left: 20px;
        margin-top: 30px;
    }
    .return-img1 {
        width: 104px;
        height: 104px;
        float: left;
        padding-left: 8px;
        margin-top: 10px;
    }
    .body1 {
        width: 375px;
        height: 1405px;
        background-color: #ffffff;
    }
    .seller-comment {
        width: 325.2px;
        height: 100px;
        margin-top: 8px;
        margin-left: 15px;
        border-radius: 5px;
        background-color: #f7f3f3;
    }
    .seller {
        font-size: 15px;
        width: 75px;
        height: 16.8px;
        color: #FFA100;
        float: left;
        padding-left: 17px;
        padding-top: 5px;
    }
    .seller-comment1 {
        width: 220.2px;
        height: 65px;
        font-size: 15px;
        float: left;
        padding-left:6px;
        margin-top: 8px;
        color: #4c4b4b;
    }
    .bar-comment {
        height: 357px;
        width: 375px;
        // margin-left: 15px;
        border-radius: 6px;
        margin-bottom: 5px;
        display: inline-block;
        background-color: #FFFFFF;
    }
    .user-loge1 {
            height: 40px;
            width: 40px;
            float: left;
            padding-left: 5px;

        }
        .user-name1 {
            height: 24px;
            width:50px;
            color: #000000D9;
            font-size: 15px;
            float: left;
            padding-left: 10px;
        }
        .user-identity1 {
            height: 18.64px;
            width: 47px;
            float: left;
            padding-left: 5px;
        }
        .user-select1 {
            width: 242px;
            height: 20px;
            font-size: 12px;
            color: #B3B3B3;
            float: left;
            padding-left: 3px;
        }
        .follow-photo {
            height: 85.4px;
            width: 300px;
            float: left;
            padding-left: 10px;
            padding-top: 13px;
        }
        .follow-photo1 {
            height: 104px;
            width: 104px;
            padding-left: 5px;
            padding-top: 15px;
            float: left;
        }
        .follow-photo2 {
            padding-left: 228px;
            padding-top: 15px;
        }
        .follow-photo3 {
            padding-left: 228px;
            padding-top: 2px;
        }
        .user-word1 {
            width: 300px;
            height: 35px;
            font-size: 15px;
            float: left;
            padding-left: 15px;
            padding-top: 10px;
        }
        .star-box1 {
            height: 12.5px;
            width: 80.5px;
            float: left;
            padding-left: 52px;
            
        }
        .comment-top {
            width: 290px;
            height: 37.5px;
            padding-top: 18px;
        }

    .bar-second {
        width: 375.2px;
        height: 42px;
        background-color: #FFFFFF;
    }
    .circle {
        height: 25px;
        width: 25px;
        padding-top: 15px;
        padding-left: 25px;
        float: left;
    }
    .second-select {
        height: 12.5px;
        width: 74.99px;
        font-size: 12.5px;
        color: #0000008C;
        float: left;
        padding-left: 2px;
        padding-top: 15px;
    }
    .second-right1 {
        font-size: 15px;
        padding-top: 15px;
        color: #0000008C;
        padding-left: 98px;
        float: left;
    }
    .second-right2 {
        font-size: 15px;
        padding-top: 15px;
        float: left;
        padding-left: 8px;
    }
    .tab-content {
        height: 53px;
        width: 375.2px;
        background-color: #FFFFFF;
        white-space: nowrap;
        overflow-y: auto;
        color: black;
    }
    .whole {
        width: 65px;
        height: 34.1px;
        display: inline-block;
        padding-left: 20px;
        padding-top: 5px;

    }
    .whole1 {
        width: 130px;
        height: 34.1px;
        display: inline-block;
        
    }
    .whole2 {
        width: 80px;
        height: 34.1px;
        display: inline-block;
        
    }
    .whole3 {
        width: 95px;
        height: 34.1px;
        display: inline-block;
        
    }
    .whole4 {
        width: 120px;
        height: 34.1px;
        display: inline-block;
        
    }

    .optimize-list {
        height: 143.3px;
        width: 343.2px;
        background-color: #FFFFFF;
        padding-left: 16px;
        padding-right: 16px;
    }
    .list1 {
        height: 34.1px;
        width: 108.3;
        float: left;
        padding-left: 25px;
        padding-top: 20px;
    
    }
    .list2 {
        width: 96px;
        height: 34.1px;
        float: left;
        padding-top: 20px;
        padding-left: 27px;
    }
    .list3 {
        height: 34.1px;
        width: 108.3;
        float: left;
        padding-left: 12px;
        padding-top: 20px;
    
    }
    .list4 {
        width: 101.06px;
        height: 34.1px;
        float: left;
        padding-top: 8px;
        padding-left: 25px;

    }
    .list5 {
        height: 34.1px;
        width: 108.3;
        float: left;
        padding-left: 8px;
        padding-top: 8px;
    
    }
    .list6 {
        width: 107.34px;
        height: 34.1px;
        float: left;
        padding-top: 5px;
        padding-left: 25px;
    }
    // .back {
    //     height: 43px;
    //     width: 75.04px;
    // }
        .body{
            width: 375px;
            height: 17974px;
        
        .product-img1 {
            width:375px;
            height:113.05px;
        }
        .product-img2 {
            background-color: #F63434;
        }
        .user {
            height: 300px;
            width: 351.2px;
            background-color: #ffffff;
            margin-left: 9px;
            border-radius: 5px;
            margin-top: 15px;
        }
        .user-box {
            height: 215px;
            width: 290px;
            background-color: #f6f2f3;
            margin-left: 15px;
            border-radius: 6px;
            margin-bottom: 5px;
            display: inline-block;
        }
        .information-top {
            width: 290px;
            height: 37.5px;
            
            padding-top: 18px;
        }
        .user-loge {
            height: 40px;
            width: 40px;
            float: left;
            padding-left: 15px;

        }
        .user-name {
            height: 24px;
            width:30.85px;
            color: #000000D9;
            font-size: 15px;
            float: left;
            padding-left: 10px;
        }
        .user-identity {
            height: 18.64px;
            width: 47px;
            float: left;
            padding-left: 20px;
        }
        .user-select {
            width: 200px;
            height: 20px;
            font-size: 12px;
            color: #B3B3B3;
            float: left;
            padding-left: 3px;
        }
        .user-photo {
            height: 85.4px;
            width: 300px;
            float: left;
            padding-left: 10px;
        }
        .user-photo1 {
            height: 83px;
            width: 83px;
            padding-left: 5px;
            padding-top: 8px;
            float: left;
        }
        .user-word {
            width: 300px;
            height: 20px;
            font-size: 12.5px;
            float: left;
            padding-left: 15px;
            padding-top: 10px;
        }
        .word-user {
            width: 300px;
            height: 20px;
            font-size: 12.5px;
            float: left;
            padding-left: 15px;
            padding-top: 1px;
        }
        .star-box {
            height: 12.5px;
            width: 80.5px;
            float: left;
            padding-left: 42px;
            
        }

        .user-information {
            width: 331.2px;
            height: 239px;
            border-radius: 8px;
            white-space: nowrap;
            overflow-y: auto;
            padding-bottom: 0px;
        }
        .user-more {
            height: 216px;
            width: 62px;
        }
        .user-title {
            font-size: 13px;
        }
        .user-comment {
            font-size: 12px;
            color: black;
        }
        .user-button1 {
            height: 28.6px;
            width: 100.44px;
            // background-color: #f1eded;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 15px;
            display: inline-block;
            color: black;
        }
        .user-button2 {
            height: 28.6px;
            width: 87.95px;
            // background-color: #FDE3E3;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 15px;
            display: inline-block;
            color: black;
        }
        .user-button3 {
            height: 28.6px;
            width: 100.44px;
            // background-color: #FDE3E3;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 15px;
            display: inline-block;
            color: black;
        }
        .user-button4 {
            height: 28.6px;
            width: 93.49px;
            // background-color: #FDE3E3;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 12.5px;
            display: inline-block;
            color: black;
        }
        .user-button5 {
            height: 28.6px;
            width: 100.44px;
            // background-color: #FDE3E3;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 12.5px;
            display: inline-block;
            color: black;
        }
        .user-button6 {
            height: 28.6px;
            width: 99.51px;
            // background-color: #FDE3E3;
            margin: 0px, 10px, 0px, 0px;
            padding: 4.5px, 12.5px;
            display: inline-block;
            color: black;
        }
        .button-box {
            height: 50px;
            width: 351.2px;
            // margin-left: 20px;
            padding-left: 5px;
            padding-top: 13px;
            // background-color: #FFFFFF;
            white-space: nowrap;
            overflow-y: auto;
        }
        .collocation {
            height: 201.1px;
            width: 351.2px;
            background-color: #FFFFFF;
            margin-left: 10px;
            border-radius: 5px;
            margin-top: 8px;
        }
        .collocation-box {
            background-color: #FFFFFF;
            white-space: nowrap;
            overflow-y: auto;
            // overflow: hidden;
            // height:144.6px;
        }
        .checked {
            width: 92.4px;
            height: 17px;
            float: left;
            padding-left: 79px;
        }
        .purple-box {
            height: 144.6px;
            width: 94px;
            background-color: #f7f5f5;
            margin-left: 15px;
            margin-top: 15px;
            border-radius: 5px;
            display: inline-block;
        }
        .purple-name {
            height: 15px;
            width: 81px;
            font-size: 12px;
            color: #333333;
            padding-top: 5px;
            padding-left: 6px;
        }
        .purple-tag {
            height: 9.6px;
            width: 9.6px;
            font-size: 10px;
            color: #F63434;
            padding-left: 5px;
        }
        .purple-price {
            width: 20.02px;
            height: 12px;
            font-size: 12px;
            color: #F63434;
            padding-left: 3px;
        }
        .purple-original {
            width: 35.36px;
            height: 12px;
            font-size: 12px;
            color: #B2B2B2;
            padding-left: 5px;
        }
        .collocation-title {
            height: 15px;
            width: 335.7px;
            padding-top: 18px;
            padding-left: 15.5px;

        }
        .collocation-title1 {
            height: 15px;
            width: 60px;
            font-size: 15px;
            padding-right: 12px;
        }
        .collocation-title2 {
            height: 12px;
            width: 116.03px;
            font-size: 12px;
            color: rgba(0,0,0,0.55);
        }
        .after-sales {
            height: 53px;
            width: 351.2px;
            font-size: 12px;
            color: rgba(0,0,0,0.55);
        }
        .after-sales1 {
            width: 83.68px;
            height: 20px;
            padding-left: 13px;
            // padding-top: 60px;
            
        }
        .after-sales2 {
            width: 69px;
            height: 20px;
            padding-left: 15px;
            padding-top: 60px;
            
        }
        .after-sales3 {
            width: 178.35px;
            height: 20px;
            padding-left: 13px;
        }
        .after-sales4 {
            width: 69px;
            height: 20px;
            padding-left: 20px;
        }
        .content {
            width: 351.2px;
            height: 121px;
            background-color: #FFFFFF;
            border-radius: 10px;
            padding-top: 5px;
            margin-left: 12px;

        }
        .address-box {
            width: 351.2px;
            height: 194.5px;
            background-color: #FFFFFF;
            margin-left: 10px;
            border-radius: 5px;
            margin-top: 8px;
        }
        .select {
            height: 52px;
            width: 26px;
            font-size: 15px;
            padding-left: 6px;
            white-space: nowrap;
            float: left;
        }
        .service1 {
            width: 28px;
            height: 17px;
            float: left;padding-left: 2px;
            font-size: 14px;
            color: black;
        }
        .service {
            width: 271.2px;
            height: 17px;
            float: left;
            color: black;
            font-size: 12px;
            padding-left: 70px;
        }
        .service2 {
            width: 150px;
            height: 17px;
            color: rgba(0,0,0,0.55);
            float: left;
        }
        .home-address {
            width: 329.5px;
            height: 22.5px;
        }
        .address {
            width: 327.2px;
            height: 108px;
            padding-top: 5px;
            margin-left: 8px;
            margin-right: 8px;
        }
        .button {
            background-color: #00000000;
            height: 30px;
            width: 62.68px;
            float: right;
            padding-right: 50px;
        }
        .button1 {
            color: #2a2929;
        }
        .tag-list {
            height: 52px;
            width: 270.2px;
            padding-top: 2px;
            
            // float: left;
            padding-right: 15px;
        }
        // :deep(.van-cell__value) {
        //     background-color: #f34141;
        //     height: 52px;
        //     width: 270.2px;
        // }
        .pop {
            height: 52px;
            width: 284.2px;
            position: relative;
            margin-bottom: 5px;
            float: left;
            margin-left: 10px;
            // background-color: #f34141;
            
        }
        .box1 {
            padding-left: 10px;
            height: 84px;
            width: 85.03px;
            font-size: 12px;
            display: inline-block;
        }
        .box2 {
            height: 84px;
            width: 108px;
            font-size: 12px;
            display: inline-block;
        }
        .box3 {
            height: 84px;
            width: 84px;
            font-size: 12px;
            display: inline-block;
        }
        .box4 {
            height: 84px;
            width: 108px;
            font-size: 12px;
            display: inline-block;
        }
        .box5 {
            height: 84px;
            width: 84px;
            font-size: 12px;
            display: inline-block;
        }
        .type1 {
            float: left;
            color:rgba(0,0,0,0.55);
            padding-left: 30px;
        }
        .system1 {
            float: left;
            color:rgba(0,0,0,0.55);
            padding-left: 8px;
        }
        .weight1 {
            float: left;
            color:rgba(0,0,0,0.55);
            padding-left: 40px;
        }
        .processor1 {
            float: left;
            color:rgba(0,0,0,0.55);
            padding-left: 15px;
        }
        .box-img {
            width: 20px;
            height: 20px;
            padding-left: 27px;
            padding-right: 2px;
            margin: 0px !important;
        }
        .box {
            background-color: #FFFFFF;
            white-space: nowrap;
            overflow-y: auto;
        }
        .div {
            overflow: hidden;
            height:84px;
        }
        .tag {
            font-size: 12px;
            height: 21px;
            width: 327.2px;
            padding-top: 89px;
            padding-left: 20px;
            padding-bottom: 5px;
        }
        .tag-name {
            height: 12px;
            width: 48px;
            // padding-bottom: 5px;
            padding-left: 8px;
            text-align: center;
            line-height: 12px;
        }
        .picture {
            padding-left: 28px;
        }
        .tag-name1 {
            padding-left: 5px;
        }
        .introduce {
            height: 60px;
            width: 327.2px;
            padding-left: 20px;
            // background-color: red;
            font-size: 17px;
            float: left;
            
        }
        .introduce1 {
            height: 14.4px;
            width: 150px;
            font-size: 13px;
            padding-left: 20px;
            float: left;
        }
        .introduce2 {
            height: 14.4px;
            width: 70px;
            font-size: 13px;
            padding-left: 14px;
            float: left;
            color: #f79a47;
        }
            .coupon{
                width: 320.2px;
                height: 88px;
                background-color: #FFFFFF;
                padding: 13.5px, 15.5px;
                margin: 10px, 12px;
                border-radius: 5px;
            .photo2 {
                float: left;
                padding-left: 15px;
            }
            .first {
                padding-top: 20px;
                padding-bottom: 0px;
                padding-left: 10px;
            }
            .two {
                padding-top: 8px;
            }
            }
            :deep(.van-cell__value){
                float: left;
                color: #f63434;
                height: 20px;
                font-size: 12px;
                padding-bottom: 0px;
                padding-left: 9px;

            :deep(.van-cell){
                margin-left: 12px;
            }
            :deep(van-cell.van-cell--clickable){
                margin-left: 12px;
                padding-top: 50px;
                height: 20px;
                height: 320.2px;
            }
            :deep(van-cell.van-cell--clickable.two){
                height: 26px;
                height: 320.2px;
            }
            }
            
            .red-ticket {
                color: rgb(243, 65, 65);
                padding-left: 15px;
                float: left;
            }
            .shopping{
                color: rgb(243, 65, 65);
                padding-left: 20px;
                float: left;
            }
            .custom-indicator {
                position: absolute;
                right: 5px;
                bottom: 32px;
                padding: 2px 5px;
                font-size: 12px;
                background: rgba(0, 0, 0, 0.1);
                border-radius: 5px;
            }
            .price{
                background-color: rgb(247, 99, 99);
                width: 375px;
                height: 60px;
                padding: 0px, 18px, 0px, 16px;
            }
            .price-tag{
                padding-left: 18px;
                float: left;
                padding-top: 25px;
                height: 11.22px;
                width: 11.22px;
                font-size: 12px;
                color: #FFFFFF;
            }
            // :deep(.van-col) {
            //     text-align: center;
            //     background-color: blueviolet;
            //     padding-top: 20px;
            // }
            .all-price{
                width: 220.44px;
                height: 25.58px;
            }
            .left{
                float: left;
                width: 225px;
                height: 60px;
            }
            .original-price {
                float: left;
                padding-top: 18px;
                padding-right: 5px;
                height: 19.8px;
                width: 44.06px;
                color: #FFFFFF;
                font-size: 20px;
            }
            .price-block {
                margin-left: 0px;
                float: left;
                margin-top: 18px;
                // padding-left: 65px;
                height: 25.58px;
                width: 103.82px;
                background-color: #FFFFFF;
                border-radius: 21px;
            }
            .offer-price {
                color: #f34141;
                font-size: 12px;
                padding-left: 10px;
                // padding-bottom: 5px;
                // text-align:center;
            }
            .new-price {
                color: #f34141;
                padding-left: 3px;
                // padding-top: 20px;
            }
            .price-tag1 {
                color: #f34141;
                font-size: 12px;
                padding-left: 3px;
            }
            .right {
                
                float: left;
                margin-left: 0;
                // position: absolute;
                width: 150px;
                height: 60px;
                // padding-left: 100px;
                // padding-top: 10px;
                // background-color: black;
            .photo1 {
                padding-top: 20px;
                padding-left: 13px;
            }
            }
            // .article-end {
            //     padding-bottom: 100px;
            // }
            
        }
    }

    .below-left {
        width: 144px;
        height: 36px;
        float: left;
    
    .prices {
        font-size: 12px;
        padding-left: 5px;
    }
    :deep(.van-button__content) {
        border-radius: 0px;
    }
    }
    }
    

</style>
<style>
:root{
    --van-tabs-bottom-bar-color:red;
    --van-button-radius:0px;
    /* --van-tag-padding:10px,50px, 6px,50px; */
    --van-tag-text-color:#000000;
    --van-cell-vertical-padding:0px;
    --van-cell-label-line-height:5px;
    --van-cell-large-vertical-padding:0px;
    --van-back-top-background:#FFFFFF;
    --van-back-top-text-color:#454343;
    --van-back-top-bottom:120px;
    --van-back-top-right:50px;
    --van-button-radius:15px;
}
/* ::-webkit-scrollbar { width: 0!important } */
</style>